<template>
    <div>
         <el-card class="box-card"  
          v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.6)">
            <div slot="header" class="clearfix">
                <span><i class="el-icon-menu"></i> LOGO修改</span>
            </div>
            <div class="upload">
                <p style="margin-bottom: 10px;color: #e6a23c;font-size: 12px;">*LOGO文件大小不可超过400kb, 图片长宽比例为10:3</p>
                <a href="javascript:;" class="file">上传LOGO
                    <input type="file" ref="fileBtn" @change="uploadImg2" />
                </a>
                <div class="logo">
                     <img :src="logoImg" alt="">
                </div>
            </div>
            
         </el-card>
           <el-card class="box-card" style="margin-top:30px;">
            <div slot="header" class="clearfix">
                <span><i class="el-icon-menu"></i> 服务电话修改</span>
            </div>
            <div>
                <el-input v-model="phone" placeholder="请输入内容" class="input" maxlength="30"></el-input>
                <el-button type="primary"   @click="saveSet()" style="width:90px;">保存</el-button>
            </div>
            
         </el-card>
          <!-- <el-card class="box-card" style="margin-top:30px;">
            <div slot="header" class="clearfix">
                <span><i class="el-icon-menu"></i> 视频开关</span>
            </div>
            <div>
                <el-switch
                    v-model="videoSwitch"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="switchVideo($event)">
                </el-switch>
                <p style="margin-top: 10px;color: #e6a23c;font-size: 12px;">
                    *该功能支持视频跳转，需要现场摄像头支持浏览器显示功能
                </p>
            </div>
            
         </el-card> -->
         <!-- <el-card class="box-card" style="margin-top:30px;"  v-if="this.desk== 'desk'">
            <div slot="header" class="clearfix">
                <span><i class="el-icon-menu"></i> 视频软件开关</span>
            </div>
            <div>
                <el-switch
                    v-model="videosSwitch"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="switchVideos($event)">
                </el-switch>
            </div>
            
         </el-card>
         <el-card class="box-card" style="margin-top:30px;" v-if="this.desk== 'desk'">
            <div slot="header" class="clearfix">
                <span><i class="el-icon-menu"></i> 门禁软件开关</span>
            </div>
            <div>
                <el-switch
                    v-model="doorsSwitch"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="switchDoors($event)">
                </el-switch>
            </div>
            
         </el-card> -->
    </div>
</template>

<script>
export default {
    data () {
        return {
            logoImg: '',
            phone:'',
            desk:'',
            loading: false,
            videoSwitch: JSON.parse(localStorage.getItem('video')) ,
            videosSwitch: JSON.parse(localStorage.getItem('videos')) ,
            doorsSwitch: JSON.parse(localStorage.getItem('doors')) ,

        }
    },
    created() {
        this.desk =  window._envir
        window.localStorage.removeItem('logo-base')
        if(localStorage.getItem('logo') == '{}' || localStorage.getItem('logo') == '' || localStorage.getItem('logo') == null || localStorage.getItem('logo') == undefined){
            this.logoImg = require('../../assets/logo.png')
        } else{
            this.logoImg = localStorage.getItem('logo')
        }
        this.videoSwitch= JSON.parse(localStorage.getItem('video')) 
        this.videosSwitch= JSON.parse(localStorage.getItem('videos')) 
        this.doorsSwitch= JSON.parse(localStorage.getItem('doors')) 
        this.getPhone()
    },
    methods: {
        getPhone(){
            var params = {
                "getlayout":"layout0",
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl, params).then((res) => {
                if(res.data.result == 'ok'){
                    this.phone =  res.data.layout0.servicephone
                }
            })
        },
        uploadImg2() {
    			var that = this;
    			const inputFile = this.$refs.fileBtn.files[0];
    			let res;
    			console.log('选了图片');
                console.log(inputFile);
                this.loading = true
    			this.inputFile = inputFile;
    			if (this.inputFile) {
    				let inputFile = this.inputFile;
    				if (inputFile.type !== 'image/png') {
                        this.$notify({
                            title: '请选择png格式文件',
                            type: 'warning',
                            duration: 2000
                        });
                        this.loading = false
    					return;
    				}
    				this.imgInfo = Object.assign({}, this.imgInfo, {
    					name: inputFile.name,
    					size: inputFile.size,
    					lastModifiedDate: inputFile.lastModifiedDate.toLocaleString()
    				});
    				const reader = new FileReader();
    				res = reader.readAsDataURL(this.inputFile);
    				reader.onloadend = function() {
                        this.base =  reader.result.substring(0);
                        localStorage.setItem("logo-base", this.base)
    				};
    				reader.onload = function(e) {
    					console.log(e);
    					that.imgSrc = this.result;   // 注意:这里的this.result中,这个this不是vue实例,而是reader对象,所以之前用that接收vue示例  that.imgSrc   
                    };
                    setTimeout(() =>{
                        var params = {
                            "setlayout":"layout7",
                            "layout":localStorage.getItem('logo-base'),
                            [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
                        }
                        console.log(params)    

                        this.$http.post(this.$baseUrl, params).then((res) => {
                            console.log(res) 
                            if(res.data.result !== 'ok'){
                                // this.logoImg = require('../../assets/logo.png')
                                // localStorage.setItem("logo", '{}')
                                this.$notify({
                                    title: '上传失败',
                                    type: 'warning',
                                    duration: 1500
                                });
                            }else{
                                this.$notify({
                                    title: '上传成功',
                                    type: 'success',
                                    duration: 1500
                                });
                                localStorage.setItem("logo", localStorage.getItem('logo-base'))
                                this.logoImg = localStorage.getItem('logo')
                                setTimeout(()=>{
                                    location.reload() // 重新加载页面
                                },500)
                            }
                            this.loading = false
                        });
                        
                    },2000);

                     
    			} else {
    				return;
    			}
        },
        // 服务电话保存
        saveSet () {
            var params = {
                "setlayout":"layout0",
                "layout":{
                    "servicephone":this.phone
                },
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl, params).then((res) => {
                if(res.data.result !== 'ok'){
                }else{
                    this.$notify({
                        title: '保存成功',
                        type: 'success',
                        duration: 1500
                    });
                    localStorage.setItem("phone", this.phone)
                }
            })
                        
        },
        // 视频监控开关
        switchVideo (val) {
            console.log(val)
            localStorage.setItem("video", val)
        },
        // 视频软件开关
        switchVideos (val) {
            console.log(val)
            localStorage.setItem("videos", val)
        },
        // 门禁软件开关
        switchDoors (val) {
            console.log(val)
            localStorage.setItem("doors", val)
        },

    }
}
</script>

<style scoped>
 .el-card {
    background: none;
    color: #fff;
    border: 1px solid rgba(89, 129, 165, 0.4);
    }
    /deep/ .el-card__header {
    background: rgba(89, 129, 165, 0.2);

    border-bottom: none;
    }
    .box-card {
    /* overflow: hidden; */
    }
    .card_padding_chart{
    padding: 7px 0;
    }
    .upload{
        position:relative;
    }
    .file {
        position: relative;
        overflow: hidden;
        display: inline-block;
        background: rgba(89, 129, 165, 0.6);
        border: 1px solid rgba(89, 129, 165, 0.6);
        border-radius: 4px;
        padding: 6px 20px;
        overflow: hidden;
        color: #fff;
        text-decoration: none;
        text-indent: 0;
        line-height: 28px;
    } 
    .file input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
    }
    /deep/ .el-input__inner{
        background: rgba(255, 255, 255, 0);
        border: 1px solid rgba(255, 255, 255, 0.3);
        width: 100%;
        color: #fff;
    }
    /deep/ .el-input{
        display: inline-block;
        width: 20%;
    }
    .fengji{
        width: 300px;
        float: left;
    }
    .fengji_p{
        width: 70px;
        height: 40px;
        line-height: 40px;
        float: left;
    }
    .fengji_input{
        width: 100px;
        float: left;
    }
</style>